import React, { useCallback, useEffect, useState } from "react";
import ReactDOM from "react-dom";
import $axios from "@/plugins/request";
import { Table } from 'antd';
import moment from "moment";

function List() {
  const [datalist, setDatalist] = useState([]);
  const columns = [
    {
      title: 'Id',
      dataIndex: '_id',
      width: 250,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      width: 150,
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      width: 150,
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      render: (text, row, index) => {
        return moment(text).format("YYYY-MM-DD HH:mm:ss")
      }
    },
    {
      title: '更新时间',
      dataIndex: 'update_time',
      render: (text, row, index) => {
        return moment(text).format("YYYY-MM-DD HH:mm:ss")
      }
    },
  ];
  // const [pagedata, setPagedata] = useState({
  //   pagesize: 6,
  //   page: 1,
  // })
  const [total, setTotal] = useState(1)
  const [pagesize, setPagesize] = useState(5)
  const [page, setPage] = useState(1)

  const getLog = useCallback(async () => {
    const { data } = await $axios.get("/api/users/getLogs", {
      params: {
        pagesize,
        page
      }

    })
    // console.log(data);
    setDatalist(data.data.list)
    setTotal(data.data.total)
  }, [pagesize, page])
  useEffect(() => {
    getLog()
  }, [getLog])

  const panigation = {
    size: "small",
    total: total,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 15, 20],
    showTotal(total) {
      return `共${total}条数据`
    },
    onChange: (page, pagesize) => {
      setPage(page)
      setPagesize(pagesize)
      getLog()
    }
  }
  return (
    <div>
      <Table rowKey="_id" columns={columns} dataSource={datalist} pagination={panigation} scroll={{ y: 500 }} />
    </div>
  )
}
export default List